<template>
  <div class="box">
      <hearder :navNumber="2"></hearder>
      <div class="box-title xt-text-hover-success xt-m-2 ">我的影集</div>

      <div class="box-con">
        <div class="box-con-cont xt-m-2 xt-d-inline-block" v-for="(item, index) in dataList" :key="index">
          <div class="box-con-cont-video">
            <video class="box-con-cont-video" width="300px" controls>
              <source  :src="item.Yaddress" type="video/mp4">
              您的浏览器不支持Video标签。
            </video>
          </div>
          <div class="xt-p xt-text-info">上传时间：{{ formatDate(item.Yuploadtime) }}</div>
          <div class="xt-p xt-text-info">上传摄影师：{{ item.Sname }}</div>
          <div class="xt-p xt-text-info">修改时间：{{ item.Yupdatetime ==='' ? item.Yupdatetime : formatDate(item.Yupdatetime) }}</div>
          <div class="xt-p xt-text-info">备注 {{ item.Ybeizhu }}</div>
          <!-- <div  class="box-con-cont-btn xt-p-1 xt-flex-center-item xt-bg-info xt-mt-5 xt-bg-hover-info xt-cursor-pointer">
            <a download="test.mp4" :href="item.Yaddress" >下载</a> 
          </div> -->
        </div>
      </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import hearder from '../components/hearder.vue'
import Axios from 'axios'

@Component({
  components: {
    hearder
  },
})
export default class Home extends Vue{
  dataList:any = [];

  created(){
    this.getUserYingji();
  }

  
  // 获取影集信息
  getUserYingji(){
    const { usernumber } = JSON.parse(window.localStorage.cyxUser);

    Axios.get('/web/userYingji', {
      params:{
          userTel: usernumber
      },
    })
    .then((res:any)=>{
      if(res.data.code === 200){
        this.dataList = res.data.data;
        return;
      }
      alert('数据查询异常，请稍后再试')
    })
  }

   /**
 * @param {数值类型} date
 */
  formatDate(date:any){
      date = new Date(date*1);
      var y  =  date.getFullYear();
      var m  =  date.getMonth()+1;
      var d  =  date.getDate();
      var h  =  date.getHours();
      var m1  =  date.getMinutes();
      var s  =  date.getSeconds();
      m  =  m<10?("0"+m):m;
      d  =  d<10?("0"+d):d;
      return y+"-"+m+"-"+d+" "+h+":"+m1+":"+s;
  }
}
</script> 

<style scoped lang="less">
.box{
  &-title{
      font-size: 20px;
      text-align: center;
  }
  &-con{
    &-cont{
      width: 300px;

      &-video{
        width: 100%;
        height: 200px;
      }
      &-btn{
        width: 100%;
      }
    }
  }
}
</style>
